// css vendor
require("../scss/user_video.scss");

// js vendor
// require("expose?jQuery!./bower_modules/jquery/dist/jquery.min");
// var $ = jQuery;

import React,{Component, PropTypes} from 'react';

// action 统一操作
const createStoreWithMiddleware = require("./common/common").createStoreWithMiddleware
import courseVideoApp from "./reducers/user/course_video_reducers"  // 存储内容处理器
let store = createStoreWithMiddleware(courseVideoApp)       // 存储对象

import {Provider} from "react-redux"    // 组装器，关联存储对象和组件容器

import {UserVideoContainer} from "./containers/user/CourseVideoContainer.jsx"   // 被装上了state和dispatch的组件容器

// code
import UserHeader from "./components/user/UserHeader/UserHeader.jsx"
// import UserFooter from "./components/user/UserFooter/UserFooter.jsx"
import PersonFooter from "./components/user/Personal/PersonFooter/PersonFooter.jsx"

// courseData
var courseData = JSON.parse(document.getElementById("courseData").innerHTML)

// userData
var logined,username,avatar,userEmail
var userData = document.getElementById("userData").innerHTML
if(userData.indexOf("NULL") !== -1){
    logined = false
}else{
    logined = true
    userData = JSON.parse(userData)
    username = userData.username
    avatar = userData.avatar
    userEmail = userData.email
}

// commentsData
var commentsData = JSON.parse(document.getElementById("commentsData").innerHTML)
console.log(commentsData)

// notesData
var notesData = JSON.parse(document.getElementById("notesData").innerHTML)

// filesData
var filesData = JSON.parse(document.getElementById("filesData").innerHTML)

// recommendCourseData
var coursesData = JSON.parse(document.getElementById("coursesData").innerHTML)

// relatedCourseData
// todo : 相关课程和推荐课程暂时用一个数据来源

//render header
var videoTitle = document.getElementById("videoTitle").innerText.trim()
var description = courseData.description
ReactDOM.render(
    <UserHeader reverse="true"
                isVideoHeader="true"
                title={videoTitle}
                logined={logined}
                username={username}
                avatar={avatar}
                description={description}
    />,
    document.getElementById("userHeader")
);

// render footer
ReactDOM.render(
    <PersonFooter />,
    document.getElementById("userFooter")
);

// render video
ReactDOM.render(
    <Provider store={store}>
        <UserVideoContainer logined={logined}
                            userEmail={userEmail}
                            comments={commentsData}
                            notes={notesData}
                            files={filesData}
                            courses={coursesData}
                            course={courseData}
                            avatar={avatar}
        />
    </Provider>,
    document.getElementById("userVideo")
)